<template>
  <div id="app" @keyup.space="playAndPauseVideo">
    <h1>[BGA] Cutter [BOFXVI]</h1>
    <h3>J00000001</h3>
    <div id="video_box">
      <div id="video"  @mouseout="mouseoutPlayer" @mouseover="mouseoverPlayer">
        <video width="100%"
               height="100%"
               id="my_video"
               @click="playAndPauseVideo"
        >
          <source :src="videoPath" type="video/mp4" >
          您的浏览器不支持 HTML5 video 标签。
        </video>
        <div id="video_util">
          <button id="play" @click="playAndPauseVideo">播放</button>
          <button id="screen" @click="screenPlayer">全屏</button>
        </div>
      </div>
      <div id="barrage">
        <h2>客官可以在这里发送弹幕哦～</h2>
        <input type="text" v-model="barrage">
        <button @click="addBarrage(barrage)">发送</button>
      </div>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
export default {
  name: 'App',
  data(){
    return {
      videoPath: require("../public/videos/test.mp4"),
      barrage:''
    }
  },
  computed: {
    videoBox() {
      return  document.getElementById("video_box")
    },
    myVideo() {
      return document.getElementById("my_video")
    },
    video() {
      return document.getElementById("video")
    },
    videoUtil() {
      return document.getElementById("video_util")
    },
    currentTime() {
      return parseInt(this.myVideo.currentTime)
    }
  },
  mounted() {
    window.addEventListener('keyup',this.handleKeyup)
  },
  destroyed() {
    window.removeEventListener('keyup',this.handleKeyup)
  },
  methods: {

    handleKeyup(event){
      if (event.keyCode == 32) {
        this.playAndPauseVideo()
      }
    },
    addBarrage(text) {
      var textTest = document.createElement("p")
      textTest.innerText = text
      textTest.style.position = "absolute"
      textTest.style.color = "white"
      textTest.style.top = "0%"
      textTest.style.right = "-10%"
      textTest.id = "testT"
      $("#video").append(textTest)
      $("#testT").animate({left:'-10%'},10000,'linear',function () {
        $("#testT").remove()
      });
    },
    getCurrentTimeInterval(fun,time) {
      return setInterval(()=>{fun},time);
    },
    playAndPauseVideo() {
      console.log("??")
      if (this.myVideo.paused) {
        this.myVideo.play()
      } else {
        this.myVideo.pause()
      }
    },
    mouseoverPlayer() {
      this.videoUtil.style.display = "block"
      $("#video_util").animate({bottom:'0.5%',opacity:'1'},200)
    },
    mouseoutPlayer() {
      $("#video_util").animate({bottom:'-3%',opacity:'1'},200,() => {this.videoUtil.style.display = "none"})
    },
    screenPlayer() {
      this.video.webkitRequestFullScreen()
    }
  }
}
</script>

<style>
#barrage{
  position: absolute;
  bottom: 0%;
  width: 100%;

}
#video_box{
  position: absolute;
  width: 2000px;
  height: 870px;
  background-color: red;
}
#video{
  position: absolute;
  width: 70%;
  overflow: hidden;
}
#video_util{
  pointer-events: none;
  position: absolute;
  bottom: 0.7%;
  width: 100%;
  height: 8%;
  display: none;
  background-color: rgba(15, 248, 155, 0.6);
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  color: #2c3e50;
  margin-top: 60px;
}

@keyframes myfist {
  0% {top: 20%}
  20% {top: 60%}
  100% {top: 30%}
}
@keyframes myfist2 {
  0% {top: 20%}
  20% {top: 60%}
  100% {top: 20%}
}
</style>
